<!--  -->
<template>
  <div v-if="cate_res">
    <div class="banner">
      <img class="banner-img" :src="cate_res.cat_banner | imgSrc" alt="" />
    </div>
    <div class="cont">
      <h3 class="title">{{ cate_res.cat_res.name }}</h3>
      <!-- <div class="search">
                <img src="@/assets/images/home/search.png" alt="">
                <input type="text" :placeholder="$t('公共.请输入搜索内容')" v-model="search_value">
                <button class="btnsearch">{{ $t("公共.搜索") }}</button>
            </div> -->
      <searchBar
        :searchText="search_value"
        @search="search($event)"
      ></searchBar>
      <div class="choiceness">
        <div class="nav">
          <!-- <p>精选人气印花</p> -->
          <ul>
            <li v-for="(item, index) in cate_res.cat_two_res" :key="index">
              {{ item.name }}
            </li>
          </ul>
          <hr />
          <el-menu
            default-active="-1"
            class="el-menu-vertical-demo"
            style="border: 0px"
          >
            <template v-for="(item1, index1) in cate_res.cat_two_res">
              <el-submenu :index="index1 + ''" :key="index1">
                <template slot="title">
                  <span>{{ item1.name }}</span>
                </template>
                <el-checkbox-group v-model="checkList">
                  <el-col
                    class="col"
                    v-for="(item2, index2) in item1.children"
                    :key="index2"
                  >
                    <el-checkbox
                      :label="item2.id"
                      @change="checkBoxChange($event)"
                      >{{ item2.name }}</el-checkbox
                    >
                  </el-col>
                </el-checkbox-group>
              </el-submenu>
            </template>
          </el-menu>
        </div>
        <div
          class="navdetails infinite-list"
          v-infinite-scroll="load"
          style="overflow: auto"
        >
          <div
            class="item"
            v-for="(item, index) in goods_list"
            :key="index"
            @click="toGoodsDetail(item)"
          >
            <el-image
              class="cover"
              :src="item.thumbnail | imgSrc"
              alt=""
              fit="cover"
            ></el-image>
            <p>{{ item.title }}</p>
            <p>{{ $t("公共.货币符号") }}{{ item.price }}</p>
          </div>
          <el-empty class="empty" v-if="goods_list.length == 0"></el-empty>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCatRes, getCatGoods } from "@/utils/api";
import searchBar from "@/components/searchBar.vue";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    searchBar,
  },
  data() {
    //这里存放数据
    return {
      cat_id: "",
      checked: false,
      cate_res: null,
      checkList: [],
      cate_banner: "",
      search_value: "",
      goods_list: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    getCatGoods() {
      getCatGoods({
        one_cat_id: this.cat_id,
        two_category_id: "",
        category_id: this.checkList.join(","),
        title: this.search_value,
      }).then((res) => {
        if (res.code == 1) {
          this.goods_list = res.data.data;
        }
      });
    },
    checkBoxChange(e) {
      // console.log(e, this.checkList);
      this.getCatGoods();
    },
    search(e) {
      this.search_value = e;
      this.getCatGoods();
    },
    // 跳转分类详情
    toGoodsDetail(item) {
      this.$router.push({
        name: "goodsdetails",
        query: {
          goods_id: item.id,
        },
      });
    },
    load() {},
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.cat_id = this.$route.query.categoryId;
    getCatRes({
      one_cat_id: this.cat_id,
    }).then((res) => {
      if (res.code == 1) {
        this.cate_res = res.data;
      }
    });
    this.getCatGoods();
  },
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="less" scoped>
.banner {
  width: 100%;
  height: 290px;

  .banner-img {
    width: 100%;
    height: 100%;
    overflow: hidden;
    object-fit: cover;
  }
}

.cont {
  margin: 0px 105px;
  display: flex;
  justify-content: center;
  flex-flow: row wrap;

  .title {
    width: 100%;
    font-size: 24px;
    font-weight: bold;
    color: #222222;
    margin-top: 20px;
  }

  .search {
    width: 50%;
    height: 60px;
    background: #f9f9f9;
    border: 1px solid #f1f1f1;
    box-shadow: 0px 0px 10px 0px rgba(227, 227, 227, 0.41);
    border-radius: 30px;
    margin: 10px 0px 30px;
    overflow: hidden;
    display: flex;
    align-items: center;

    img {
      width: 25px;
      height: 25px;
      margin-left: 10px;
    }

    input {
      width: 82%;
      height: 100%;
      outline: none;
      border: 0;
      background-color: transparent;
      text-indent: 2em;
      font-size: 20px;
      font-weight: 400;
      color: #999999;
    }

    .btnsearch {
      width: 15%;
      height: 54px;
      background: #ff5757;
      border-radius: 30px;
      // font-size: 20px;
      font-weight: 400;
      color: #ffffff;
      text-align: center;
      line-height: 54px;
      border: 0;
      outline: 0;
    }
  }

  .choiceness {
    width: 100%;
    display: flex;

    .nav {
      width: 15%;

      p {
        font-size: 22px;
        font-weight: 400;
        color: #222222;
        line-height: 38px;
      }

      ul {
        li {
          font-size: 20px;
          font-weight: bold;
          color: #222222;
          line-height: 38px;
        }
      }

      .el-menu-vertical-demo {
        margin-top: 20px;

        /deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
        .el-checkbox__input.is-indeterminate .el-checkbox__inner {
          border-color: #222222 !important;
          background-color: #222222 !important;
        }

        /deep/ .el-checkbox__input.is-focus .el-checkbox__inner {
          border-color: #222222 !important;
        }

        //修改选中后文本的颜色
        /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
          color: #222222 !important;
        }

        /deep/ .el-checkbox__inner:hover {
          border-color: #222222;
        }
      }
    }

    .navdetails {
      padding: 30px;
      flex: 1;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      flex-direction: row;
      gap: 50px;

      .item {
        width: 300px;
        cursor: pointer;
        display: flex;
        justify-content: flex-start;
        flex-direction: column;

        .cover {
          width: 100%;
          flex: 1;
        }

        p {
          width: 100%;
          text-align: center;
          font-size: 16px;
          font-weight: 600;
          color: #222222;
          line-height: 20px;
        }
      }

      .empty {
        width: 100%;
      }
    }
  }
}
</style>
